<template>
  <div>
    <el-container>

      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <div>消息提醒</div>
            <div>
              <div class="createimg-left createimg-index-select-button"><el-button @click.native="addMessage" size="small">添加</el-button></div>
            </div>
          </el-header>
          <el-main class="info-main padding-style">
            <el-table :data="tableData" border style="width: 100%;height:700px;">
              <el-table-column prop="number" label="消息类型" width="150"></el-table-column>
              <el-table-column label="电子邮件" width="250">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.datetime" @change="handleCheckedCitiesChange($event,scope.row.datetimeId)" >是否发送</el-checkbox>
                  <el-button size="mini" class="margin-left" @click="exportOrder(scope.row.datetimeId)">编辑内容</el-button>
                </template>
              </el-table-column>
              <el-table-column label="站内消息">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.name" @change="handleCheckedCitiesChange($event,scope.row.nameId)">是否发送</el-checkbox>
                  <el-button size="mini" class="margin-left" @click="exportOrder(scope.row.nameId)">编辑内容</el-button>
                </template>
              </el-table-column>
              <el-table-column label="手机短信">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.money" @change="handleCheckedCitiesChange($event,scope.row.moneyId)">是否发送</el-checkbox>
                  <el-button size="mini" class="margin-left" @click="exportOrder(scope.row.moneyId)">编辑内容</el-button>
                </template>
              </el-table-column>
              <el-table-column label="APP消息推送">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.stater" @change="handleCheckedCitiesChange($event,scope.row.staterId)">是否发送</el-checkbox>
                  <el-button size="mini" class="margin-left" @click="exportOrder(scope.row.staterId)">编辑内容</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-main>
    </el-container>

  </div>
</template>

<script>
    import goodImgeListApi from "@/api/goods/imagelist";
    export default {
        data() {
            return {
                requestUrl:goodImgeListApi.getRequestUrl().defaults.baseURL+'/api-sys/message-remind/',
                tableData: []
            }
        },
        methods:{
            addMessage(){
                this.$router.replace({ path: "/settings/addMessage" });
            },
            exportOrder(id){
                this.$router.push({ path: "/settings/addMessage",query:{id:id}});
            },
            handleCheckedCitiesChange(val,id){
                let isSend="";
              if(val){
                  isSend="0";
              }else{
                  isSend="1";
              }
                let param = new FormData(); //创建form对象
                param.append('isSend',isSend);
                param.append('id',id);
                this.axios.post(this.requestUrl+"updateSend",param).then((response) => {
                    if(response.data.error_no != 0) {
                        this.$message({
                            type: 'error',
                            message: response.data.error_info
                        });
                    }
                })

            },
            initData(){
                this.axios.get(this.requestUrl+"find").then((response) => {
                    if(response.data.error_no == 0){
                        response.data.results.forEach((item, index) => {
                            let isHave=false;
                            let content = {number:'',datetime:true,datetimeId:'',name: true,nameId:'',money: true,moneyId:'',stater: true,staterId:''};
                            response.data.results.forEach((item2, index2) => {
                                if(item.messageType == item2.messageType){
                                    content.number=item.messageType;
                                    if(item2.messageClassification == '电子邮件'){
                                          content.datetime=item2.isSend=='0'?true:false;
                                          content.datetimeId = item2.id;
                                    }else if(item2.messageClassification == '站内消息'){
                                        content.name=item2.isSend=='0'?true:false;
                                        content.nameId = item2.id;
                                    }else if(item2.messageClassification == '手机短信'){
                                        content.money=item2.isSend=='0'?true:false;
                                        content.moneyId = item2.id;
                                    }else if(item2.messageClassification == 'APP消息推送'){
                                        content.stater=item2.isSend=='0'?true:false;
                                        content.staterId = item2.id;
                                    }
                                }
                            });
                            if(this.tableData.length==0){
                                this.tableData.push(content);
                            }
                            this.tableData.forEach((item3, index3) => {
                                if(item3.number!=item.messageType){
                                    isHave = true;
                                }
                                if(item3.number==item.messageType){
                                    isHave = false;
                                }
                            });
                            if(isHave){
                                this.tableData.push(content);
                            }
                        });
                    }
                })
            }
        },
        mounted() {
            this.initData();
        }
    }
</script>

<style scoped>
  .badges {
    height: 60px;
    padding: 10px;
  }
  .common-home,.content-header{
    border-bottom:1px solid #E4E4E4;
    position: relative;
  }
  .common-home>div{
    display: inline-block;
    width:100px;
    height:50px;
    vertical-align: top;
    text-align: center;
    line-height: 50px;
    color:#666666;
  }
  .common-home>.refresh{
    position: absolute;
    right:10px;
  }
  .common-home>div>span{
    border:4px solid #0399FE;
    display: inline-block;
    width: 0px;
    height: 15px;
    vertical-align: middle;
    margin-right: 5px;
    background-color: #0399FE;
  }
  .parent-body{
    border:1px solid #E4E4E4;
  }
  .content-header{
    height:50px;
    line-height: 50px;
    background-color:#F3F3F3;
    color:#666666;
    position: relative;
    text-align: left;
  }
  .info-main{
    background-color:#fff;
  }

  .content-header>div{
    display: inline-block;
  }
  .content-header>div:last-of-type{
    position: absolute;
    right:10px;
  }
  .input-width{
    width:200px;
  }
  .select-div{
    display: inline-block;
    width:300px;
  }
  .input-width2{
    width:120px;
  }
  .input-width3{
    width:400px;
  }
  .padding-style{
    padding:0 !important;
  }

  .info-foot{
    background-color:#FDFDFE;
    height:60px;
    line-height: 60px;
    position: relative;
  }
  .paging-style{
    position: absolute;
    right:10px;
    display: inline-block;
    top:15px;
  }
  .margin-left{
    margin-left:10px;
  }
  .search-style{
    width:50%;
    display: inline-block;
    vertical-align: top;
  }
</style>

